import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
export default function List1(props) {
    console.log(props)
    let [scrollflag, setScrollflag] = useState(false)
    let [showarr, setShowarr] = useState([])
    // 设置滚动事件滚动100px高度时候触发
    let scroll = () => {
        if (window.scrollY >= 100) {
            setScrollflag(true)
        } else {
            setScrollflag(false)
        }
    }
    let [url, setUrl] = useState("")
    let [ischeckedicoid, setIscheckedicoid] = useState(0)
    // 
    let icons = [
        {
            id:1,
            name: "综合"
        },
        {
            id:2,
            name:"销量"
        },
        {
            id:3,
            name:"价格"
        }
    ]
    // 设置page
    let [page, setPage] = useState(0)
    let [datalist, setDatalist] = useState([])
    const [hasMore, setHasMore] = useState(true)
    // 定义一个方法，用来获取到所有商品
    useEffect(() => {
        // 获取当前的url
        let a = window.location.href.split("/")[4]
        setUrl(a)
    }, [])
    let id = localStorage.getItem("id")
    // 定义渲染上去的数据
    // 根据传递过来id获取到属于它的商品
    let getlist = async () => {
        let copy_page = page + 1
        setPage(copy_page)
        let { data } = (await axios.get("/goods/gooodlist", { params: { id, page: copy_page } })).data
        setDatalist([...datalist, ...data])
        setShowarr([...showarr,...data])
        setHasMore(data.length > 0)
        await sleep(2000)
    }
    useEffect(() => {
        getlist()
    }, [])
    let changeico = (index) => {
        setIscheckedicoid(index)
        if (index === 0) {
            setShowarr(datalist)
        } else if (index === 1) {
            // 按照销量来排序
            let newarr = showarr.sort((a, b) => {
                return b.num - a.num
            })
            setShowarr(newarr)
        } else if (index === 2) {
            // 按照价格来排序
            let newarr = showarr.sort((a, b) => {
                return b.price - a.price
            })
            setShowarr(newarr)
        }
    }
    // 后端拿到这个店铺的所有数据
    return (
        <div className='listbox'>
            {/* 添加筛选 */}
            <div className=''>
                {
                    url === "list" ? <div className='shuaixuannav'>
                        {
                            icons.map((item, index) => (
                                <div onClick={() => { changeico(index) }} className={
                                    ischeckedicoid === index ? "icos_active" : "box_icons"
                                } key={index}>
                                    <span>{item.name}</span>
                                </div>
                            ))
                        }
                    </div> : ""
                }
            </div>
            {/* 首页只展10条，在商品中可以查看更多 */}
            {/* 无限滚动 */}
            <List>
                {showarr.map((item, index) => (
                    <List.Item key={index}>
                        <div className='box_item'>
                            <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/pic_u1978-0.png'></img>
                            <span style={{ fontSize: "1.4rem" }}>
                                {item.name.length > 5 ? item.name.slice(0, 5) + "..." : item.name}
                            </span>
                            <div className='box_item_price'>
                                <img style={{ width: '1.8rem', height: "1.8rem" }} src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u817.png'></img>
                                <span>￥{item.price}</span>
                            </div>
                            <span>
                                ￥
                                {
                                    (item.price * 0.9).toFixed(2)
                                }
                            </span>
                        </div>
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={getlist} hasMore={hasMore} />
        </div>
    )
}
